<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$site_name} 用户注册</title>
    <meta name="applicable-device" content="pc,mobile">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <script src="/static/js/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/js/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
    <script src="/static/js/center.js?v={:release()}"></script>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="content" class="userLogin layui-fluid">

    <div class="form-header">
        <i class="layui-icon layui-icon-username"></i>
        <h6>用户注册</h6>
    </div>
    <div class="formLogin active">

        <form class="layui-form mobileLogin" action="/index/user/register" method="post">
            <div class="layui-form-item item-input">
                <input type="text" id="nickname" name="nickname" lay-verify="required" data-title="账号"
                       placeholder="{:__('请输入登录账号')}" class="inputStyle" value="">
            </div>
            <div class="layui-form-item item-input">
                <input type="password" id="pwd" name="pwd" lay-verify="required" data-title="密码" maxlength="32"
                       placeholder="{:__('请输入密码')}" class="inputStyle" value="">
                <span class="fr-icon visiblePwd"><i class="layui-icon layui-icon-eye-invisible"></i></span>
            </div>

            <div class="layui-form-item item-input">
                <input type="password" id="pwd2" lay-verify="required" data-title="密码" maxlength="32"
                       placeholder="{:__('请输入确认密码')}" class="inputStyle" value="">
                <span class="fr-icon visiblePwd"><i class="layui-icon layui-icon-eye-invisible"></i></span>
            </div>
            <eq name="style" value="mobile">
                <div class="layui-form-item item-input">
                    <input type="text" id="mobile" name="mobile" lay-verify="required" data-title="手机号"
                           placeholder="{:__('请输入手机号码')}" class="inputStyle mobile" value="">
                </div>
                <div class="layui-form-item item-input">
                    <input type="text" id="captcha" name="captcha" lay-verify="required" data-title="验证码"
                           maxlength="6"
                           placeholder="{:__('短信验证码')}" class="inputStyle" value="">
                    <input type="text" hidden name="event" class="event" value="login">
                    <span class="fr-icon getCaptcha" lay-ajax data-url="/api/ajax/smsSend"
                          data-object="mobile:mobile,event:event">获取验证码</span>
                </div>
                <else/>
                <div class="layui-form-item item-input">
                    <input type="text" name="email" lay-verify="require|email" placeholder="请输入邮箱" class="inputStyle">
                </div>
            </eq>

            <input type="hidden" id="token" name="__token__" value="{:token()}"/>
            <div class="layui-form-item">
                <div class="fl">
                    <input type="checkbox" name="remember" lay-skin="primary" title="{:__('记住密码')}" checked>
                </div>
                <div class="fr">
                    <a href="/index/user/login" class="forgot-link" style="margin-top: 7px;">{:__('返回登录')}</a>
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn layui-btn-login layui-btn-fluid layui-btn-normal"
                        lay-filter="submitIframe" data-reload="top" lay-submit>{:__('立即注册')}</button>
            </div>
            <div class="agreement">
                <span>未注册手机验证后自动登录，注册即代表同意<a href="#">《用户协议》</a>以及网站<a href="#">《隐私保护指引》</a></span>
            </div>
        </form>
    </div>

    <div class="loginLine"></div>
    <div class="appUserDown">
        <div class="fr">
            <a class="link" href="#" target="_top">
                <span>
                    <i class="layui-icon layui-icon-ios"></i>
                    <i class="layui-icon layui-icon-android"></i>
                    <i class="layui-icon layui-icon-windows"></i>
                    <span class="tit">下载 APP</span>
                </span>
            </a>
        </div>
    </div>
</div>

</body>
<script>
    layui.use(['jquery'], function (e) {
        let $ = layui.jquery;
        let layer = layui.layer;
        $('#pwd, #pwd2').blur(function(e) {
            let v1 = $('#pwd').val();
            let v2 = $('#pwd2').val();
            let v3 = v1 && v2 && (v1 !== v2);
            v3 && layer.msg('密码不相同');
            $('.layui-btn-login').attr('disabled', v3);
        })

        /* 显示隐藏密码 */
        $('.visiblePwd').click(function() {
            // 获取我同级上面得input元素
            let elem = $(this).prev('input');
            let type = $(elem).attr('type');
            if (type === 'password') {
                $(elem).attr('type','text');
                $(this).find('i.layui-icon').addClass('layui-icon-eye').removeClass('layui-icon-eye-invisible');
            } else {
                $(elem).attr('type','password');
                $(this).find('i.layui-icon').addClass('layui-icon-eye-invisible').removeClass('layui-icon-eye');
            }
        });
    });
</script>
</html>